<template>
    <view class="container">
		<view class="cu-card">
			<view class="cu-item bg-white shadow-warp" v-for="(item, index) in list" :key="index">
				<view class="cu-list menu-avatar">
					<view class="cu-item">
						<view class="cu-avatar lg" :style="'background-image: url(/static/images/contact_'+item.icon+'.png);background-size: 100% 100%;'"></view>
						<view class="content">
							<view class="text-cut">{{ item.title }}</view>
							<view class="text-gray text-sm flex">
								<view>{{ item.sub_title }}</view>
							</view>
						</view>
						<view class="action" v-if="item.btn_title">
							<view class="cu-btn bg-red text-white round" v-if="item.action == 'service'" @click="navTo(item.action_value)">{{ item.btn_title }}</view>
							<view class="cu-btn bg-red text-white round" v-if="item.action == 'tel'" @click="tel(item.action_value)">{{ item.btn_title }}</view>
							<view class="cu-btn bg-red text-white round" v-if="item.action == 'copy'" @click="copy(item.action_value)">{{ item.btn_title }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="padding-lr" v-if="tip">
			<view class="padding-bottom-sm">温馨提示:</view>
			<view class="text-gray text-sm">{{ tip }}</view>
		</view>
    </view>
</template>

<script>
	import h5Copy from "@/common/h5-copy.js"
	export default {
        data() {
            return {
				list: [],
				tip:''
            }
        },
		onLoad: function (option) {
			this.helper.checkLogin();
			this.getData();
		},
		methods: {
            getData: function() {
				//获取基础参数
				// uni.showLoading({
				// 	title:"数据加载中",
				// 	mask:true
				// })

				let timestamp = this.helper.now();
				let sign = this.helper.setSign(['timestamp='+timestamp]);
				this.helper.req({
					api:"getContact",
					timestamp:timestamp,
					data:{},
					header:{sign:sign},
					method:'GET',
				}).then(res=>{
					this.list = res.data.data.list;
					this.tip = res.data.data.tip;
					uni.hideLoading();
				})
            },
			tel: function(val) {
				// #ifdef APP-PLUS
				uni.makePhoneCall({
					// 手机号
					phoneNumber: val, 
					// 成功回调
					success: (res) => {
						// console.log('调用成功!')	
					},
					// 失败回调
					fail: (res) => {
						// console.log('调用失败!')
					}
				});
				// #endif
			},
			copy: function(val) {
				// #ifndef H5
				uni.setClipboardData({
					data: val
				});
				// #endif
				// #ifdef H5
				const result = h5Copy(val)
				if (result === false) {
					uni.showToast({
						title:'不支持',
					})
				} else {
					uni.showToast({
						title:'复制成功',
						icon:'none'
					})
				}
				// #endif
			},
			navTo: function(val) {
				uni.navigateTo({
					url: val
				});	
			}
		},
    }
</script>

<style lang="scss">
	.cu-avatar.lg {
	    width: 96upx;
	    height: 96upx;
	    background-color: #fff;
	}
	.cu-list.menu-avatar > .cu-item .action{
		width: 200upx;;
	}
</style>